<template>
  <div>
    <title-bar>
      <slot>建议</slot>
    </title-bar>
    <el-card style="width: 100%">
      <div>
        <el-row type="flex">
          <el-col style="height: 51px">
            <el-row>
              <el-input
                v-model="keywordSearch"
                size="small"
                style="width: 220px"
                placeholder="输入关键词"
              ></el-input>
              <el-button
                size="small"
                style="margin-left: 10px"
                type="primary"
                @click="keySearch"
                >搜索</el-button
              >
              <div style="margin-left: 30px; display: inline-block">
                <label>反馈类型</label>
                <el-select
                  @change="selectChange"
                  filterable
                  placeholder=""
                  v-model="value"
                  size="small"
                  style="margin-left: 12px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-row>
          </el-col>
          <el-col>
            <el-row type="flex" align="center" justify="end"
              ><el-button
                size="small"
                type="primary"
                style="margin-right: 0px"
                @click="$router.push('/makeSuggestion')"
                >提建议</el-button
              ></el-row
            ></el-col
          >
        </el-row>
        <div style="margin-top: 20px">
          <el-table
            doLayout
            style="width: 100%"
            :data="tableData"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <el-table-column
              ref="tableSelect"
              prop="suggestionDate"
              label="反馈时间"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="suggestionTpye"
              label="反馈类型"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="problemType"
              label="问题类型"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="subject"
              label="主题"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="suggestionContent"
              label="反馈内容"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="replyState"
              label="回复状态"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="processState"
              label="处理状态"
            ></el-table-column>
            <el-table-column
              ref="tableSelect"
              prop="satisfaction"
              label="满意度"
            ></el-table-column>
            <el-table-column ref="tableSelect" prop="operation" label="操作">
              <template slot-scope="scope">
                <el-row>
                  <span
                    @click="detail(scope.$index, scope.row)"
                    style="color: blue"
                    >详情</span
                  ><span
                    style="margin: 20px; color: blue"
                    @click="evaluate(scope.$index, scope.row)"
                    >删除</span
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <detail-dialog :detail-dialog.sync="detailDialog"> </detail-dialog>
  </div>
  <!-- ,getSuggestionTpyeSearch, getSuggestionContentSearch -->
</template>

<script>
import {
  getSuggestion,
  getSuggestionTypeList,
  getSuggestionType,
  getProblemTypeSearch,
  getSuggestionContentSearch,
  getSuggestionTpyeSearch,
  delSuggestionId
} from '@/apis/suggestion'
import DetailDialog from './components/detail-dialog.vue'
export default {
  name: 'Suggestion',
  data () {
    return {
      options: [],
      value: '全部',
      tableData: [],
      row: [],
      detailDialog: false,
      keywordSearch: ''
    }
  },
  props: {},
  components: {
    DetailDialog
  },
  created () {
    this.getSuggestion()
    this.getSuggestionTypeList()
  },
  mounted () {},
  methods: {
    async getSuggestion () {
      const { data } = await getSuggestion()
      this.tableData = data
    },
    async getSuggestionTypeList () {
      const { data } = await getSuggestionTypeList()
      this.options = data
    },
    detail (index, row) {
      this.row = row
      this.detailDialog = true
    },
    async evaluate (index, row) {
      // 删除建议
      await delSuggestionId(row.id)
      this.getSuggestion()
    },
    async selectChange (item) {
      if (item === '全部') {
        await this.getSuggestion()
      } else {
        const { data } = await getSuggestionType(item)
        this.tableData = data
        console.log(this.tableData)
      }
    },

    async keySearch () {
      const dataOne = await getProblemTypeSearch(this.keywordSearch)
      const dataTwo = await getSuggestionTpyeSearch(this.keywordSearch)
      const dataThree = await getSuggestionContentSearch(this.keywordSearch)
      const arr = [...dataOne.data, ...dataTwo.data, ...dataThree.data]
      const objone = {}
      const arrTwo = arr.reduce(function (item, next) {
        if (objone[next.id]) {
          objone[next.id] = ''
        } else {
          objone[next.id] = true && item.push(next)
        }
        return item
      }, [])
      this.tableData = arrTwo
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="scss">
</style>
